<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #neon-btn {
        text-align: center;
        height: 100vh;
        line-height: 100vh;
        background-color: #031628;
    }

    .btn {
        border: 1px solid;
        background-color: transparent;
        text-transform: uppercase;
        font-size: 14px;
        padding: 10px 20px ;
        font-weight:300;
    }
    
   
    .one {
        color: #4cc9f0;
    }
    .two {
        color: #f038ff;
    }
    .three {
        color: #b9e769;
    }
    
    .btn:hover {
        color: white;
        border: 0;
    }
    .one:hover {
        background-color: #4cc9f0;
        box-shadow: 10px 10px 99px 6px rgba(76,201,240,1);
    }
    .two:hover {
        background-color: #f038ff;
        box-shadow: 10px 10px 99px 6px rgba(240, 56, 255,1);
    }
    .three:hover {
        background-color: #b9e769;
        box-shadow: 10px 10px 99px 6px rgba(185,231,105,1);
    }
</style>
<body>
    <div id="neon-btn">
        <button class="btn one">Hover me</button>
        <button class="btn two">Hover me</button>
        <button class="btn three">Hover me</button>
    </div>
</body>
</html>